<template>
  <div class="g-bd">
    <!-- 热门新碟 -->
    <template v-if="newDistList">
      <div class="u-title">
        <h3>
          <span>热门新碟</span>
        </h3>
      </div>
      <ul>
        <li v-for="item in newDistList" :key="item.albumId">
          <div class="cover">
            <img :src="item.coverUrl + '?param=130y130'" :title="item.albumName" />
            <router-link
              :to="'/album?id=' + item.albumId"
              class="msk"
              :title="item.albumName"
            ></router-link>
            <!-- <a :href="'/album?id=' + item.albumId" class="msk" :title="item.albumName"></a> -->
            <a href="javascript:;" class="icon-play" @click="playList(item.id)"></a>
          </div>
          <p class="albumName">
            <router-link :to="'/album?id=' + item.albumId" :title="item.albumName">{{
              item.albumName
            }}</router-link>
            <!-- <a :href="'/album?id=' + item.albumId" :title="item.albumName">{{ item.albumName }}</a> -->
          </p>
          <p class="artistName">
            <!-- <router-link to="`/artist?id=${item.artist.id}`" :title="item.artistName">{{ item.artistName }}</router-link> -->
            <a href="javascript:void(0);" :title="item.artistName">{{ item.artistName }}</a>
          </p>
        </li>
      </ul>
    </template>
    <!-- 全部新碟 -->
    <template v-if="allDistList">
      <div class="u-title">
        <h3>
          <span>全部新碟</span>
        </h3>
        <div class="tab">
          <router-link to="/discover/album?area=ALL" class="tab-link">全部</router-link>
          <span>|</span>
          <router-link to="/discover/album?area=ZH" class="tab-link">华语</router-link>
          <span>|</span>
          <router-link to="/discover/album?area=EA" class="tab-link">欧美</router-link>
          <span>|</span>
          <router-link to="/discover/album?area=KR" class="tab-link">韩国</router-link>
          <span>|</span>
          <router-link to="/discover/album?area=JP" class="tab-link">日本</router-link>
        </div>
      </div>
      <ul>
        <li v-for="item in allDistList" :key="item.id">
          <div class="cover">
            <img :src="item.picUrl + '?param=130y130'" :title="item.name" />
            <router-link :to="'/album?id=' + item.id" class="msk" :title="item.name"></router-link>
            <a href="javascript:;" class="icon-play" @click="playList(item.id)"></a>
          </div>
          <p class="albumName">
            <router-link :to="'/album?id=' + item.id" :title="item.name">{{
              item.name
            }}</router-link>
          </p>
          <p class="artistName">
            <router-link :to="`/artist?id=${item.artist.id}`" :title="item.artist.name">{{
              item.artist.name
            }}</router-link>
          </p>
        </li>
      </ul>
      <!-- 分页 -->
      <PageNav
        :total="total"
        :pageSize="35"
        :currentPage="currentPage"
        @currentChange="handleCurrentChange"
        v-if="allDistList"
      ></PageNav>
    </template>
  </div>
</template>

<script>
import PageNav from '@/components/PageNav/PageNav.vue'
export default {
  components: { PageNav },
  data() {
    return {
      // 热门新碟
      newDistList: null,
      // 全部新碟参数
      params: { area: 'ALL', limit: 35, offset: 0 },
      // 所有新碟
      allDistList: null,
      // 总数
      total: 0,
      // 当前页码
      currentPage: 1
    }
  },
  methods: {
    // 获取新碟上架数据
    async getNewDistList() {
      const { data } = await this.$http.get('/album/list?limit=10')
      const products = data.products
      this.newDistList = products
    },
    // 获取所有新碟
    async getAllDistList() {
      this.params = Object.assign(this.params, this.$route.query)
      const { data } = await this.$http.get('/album/new', { params: this.params })
      // console.log(data)
      console.log(this.currentPage)

      // const products = data.products
      this.allDistList = data.albums
      this.total = data.total
    },
    // 分页按钮改变，重新获取数据
    handleCurrentChange(val) {
      this.currentPage = val
      // 更新offset
      this.params.offset = (val - 1) * this.params.limit
      // 将parmas拼接
      const temparr = []
      for (const key in this.params) {
        temparr.push(key + '=' + this.params[key])
      }
      const query = '?' + temparr.join('&')
      // 路由跳转
      this.$router.push('/discover/album' + query)
      // 重新获取数据
      this.getAllDistList()
    },
    // 将播放列表替换为榜单列表
    async playList(id) {
      const { data } = await this.$http.get(`/album?id=${id}`)
      const tracks = data.songs
      this.$store.commit('Music/setplayerSettingIndex', 0)
      this.$store.commit('Music/setSongList', tracks)
    }
  },
  watch: {
    $route(to, from) {
      console.log(to.query)
      // 重置当前页
      if (to.query.area !== from.query.area) {
        this.params.offset = 0
        this.currentPage = 1
      }
      // this.currentPage = 1
      // 重新获取数据
      this.getAllDistList()
    }
  },
  created() {
    // 获取新碟上架数据
    this.getNewDistList()
    this.getAllDistList()
  }
}
</script>

<style lang="less" scoped>
.g-bd {
  padding: 40px;
  ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    top: 0;
    width: 900px;
    margin-left: 14px;
    // height: 184px;
    padding-top: 28px;
    li {
      flex: 20%;
      width: 153;
      height: 178;
      margin-bottom: 20px;
      // 专辑封面
      .cover {
        position: relative;
        margin-bottom: 7px;
        cursor: pointer;
        img {
          display: block;
          width: 130px;
          height: 130px;
        }
        .msk {
          position: absolute;
          top: 0;
          left: 0;
          width: 153px;
          height: 130px;
          background: url(~@/assets/images/coverall.png) no-repeat;
          background-position: 0 -845px;
        }
        .icon-play {
          display: none;
          position: absolute;
          left: 94px;
          bottom: 5px;
          width: 28px;
          height: 28px;
          background: url(~@/assets/images/iconall.png) no-repeat 0 -140px;
        }
        &:hover .icon-play {
          display: block;
        }
      }
      // 标题和作者名
      p {
        width: 118px;
        height: 18px;
        line-height: 18px;
        text-align: left;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #666;
      }
      .albumName a {
        font-size: 14px;

        color: black;
      }
    }
    /* 如果最后一行是4个元素 */
    li:last-child:nth-child(5n - 1) {
      margin-right: calc(20%);
    }
    /* 如果最后一行是3个元素 */
    li:last-child:nth-child(5n - 2) {
      margin-right: calc(40%);
    }
    /* 如果最后一行是2个元素 */
    li:last-child:nth-child(5n - 3) {
      margin-right: calc(60%);
    }
  }
}
</style>
